<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>

	</head>
	<body>
		<label>全选</label><input type="checkbox" class="allclick" />
		<label>全不选</label><input type="checkbox" class="allnoclick" />
		<label>反选</label><input type="checkbox" class="noclick" />
		<div class="box">
			<input type="checkbox" data-click="yes" />1
			<input type="checkbox" data-click="yes" />2
			<input type="checkbox" data-click="yes" />3
			<input type="checkbox" data-click="yes" />
		</div>
		<script src="../jquery-3.4.1.min.js"></script>
		<script>
			$(function() {
				//全选 只是针对全选
				$(".allclick").click(function() {
					var mark = $(".allclick").prop("checked");
					if (mark == true) {
						$(".box input").prop("checked", true);
						$(".allnoclick").prop("checked", false);
						$(".nolick").prop("checked", false);
					}
				});
				//全不选 只是针对全不选中
				$(".allnoclick").click(function() {
					var mark = $(".allnoclick").prop("checked");
					if (mark == true) {
						$(".box input").prop("checked", false);
						$(".allclick").prop("checked", false);
						$(".nolick").prop("checked", false);
					}
				});
				//反选
				$(".noclick").click(function() {
					$(".box input").each(function(i) {
						var mark = $(".box input").eq(i).prop("checked");
						if (mark == true) { //已经被选中
							$(".box input").eq(i).prop("checked", false);
							$(".allnoclick").prop("checked", false);
							$(".allclick").prop("checked", false);
						} else if (mark == false) { //没有被选中
							$(".box input").eq(i).prop("checked", true);
							$(".allnoclick").prop("checked", false);
							$(".allclick").prop("checked", false);
						}
					});
				});

			});
		</script>
	</body>
</html>
